<template>
  <div id="anov-app-sys">
    <cmlpanel ref="setting">
      <div id="con">
        <App></App>
        <modal ref="anovModel"></modal>
      </div>
    </cmlpanel>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import App from '@/App'
import modal from '@/assets/js/app/message/modal'
import { cloneDeep } from 'dtc'
export default {
  data() {
    return {
      axis: 'absolute' //‘relative’以相对父级进行定位,默认 'absolute',以页面左上角为（0，0）
    }
  },
  created() {
    app.config.pageSize = cloneDeep(Object.assign({}, App.pageSize))
  },
  mounted() {
    // 页面适配
    if (this.$route.name == '404') {
      app.loading.state == 'show' && app.loading.hide()
      return
    }
    // 引导提示
    /*let flag = localStorage.getItem('anov-guide')
    let headLess = window.navigator.userAgent.toLowerCase().indexOf('headless')
    __ANOV__ENV.debug &&
      flag != 1 &&
      headLess == -1 &&
      app.$once(app.EventType.pageTlStart, () => {
        app.modal.open({
          type: 'success',
          componentsName: 'guide'
        })
      })*/
    // app.axis = __ANOV__PUBLIC__CONFIG?.axis || App.axis || this.axis
    // 双击 anov-logo类打开|关闭 控制面板
    let dom = document.getElementById('con')
    dom.addEventListener('dblclick', (e) => {
      let target = e.target || e.srcElement
      let parentEle = e.target.parentElement
      if (
        target.classList.contains('anov-logo') ||
        parentEle.classList.contains('anov-logo')
      ) {
        app.panelServer.toggle()
      }
    })

    //根据网络状态智能切换数据源类型
    app.envServer.addEventListener('onLine', () => {
      console.log(app.config.dataSource.type, app.dataSourceServer?.type)
      if(app.config.dataSource.type == 'restful' && app.dataSourceServer?.type == 'file'){
        app.dataSourceServer.type = 'restful'
      }
    })
    app.envServer.addEventListener('offLine', () => {
      if(app.dataSourceServer?.type == 'restful'){
        app.dataSourceServer.type = 'file'
      }
    })
  },
  computed: {
    ...mapState('cmlpanel', ['isPanelOpen']),
    ...mapState('sound', ['isSoundOpen', 'soundsType']),
    ...mapState('dataSource', ['type']),
    ...mapState('env', ['designSize'])
  },
  watch: {
    isSoundOpen(v) {
      if (v) {
        app.soundServer.play({
          type: 'bgm',
          duration: -1
        })
      } else {
        app.soundServer.stop()
      }
    },
    soundsType(v) {
      app.soundServer.play({
        type: 'bgm',
        duration: -1
      })
    },
    isPanelOpen(v) {
      setTimeout(() => {
        app.adaptPages.adaptApp.resize()
        app.adaptPages.adaptModal.resize()
      }, 300)
    },
    type(v) {
      // 数据源类型切换
      if (!app.isInit) return
      app.$once(app.EventType.dataReady, () => {
        app.anovPage?.update()
      })
    },
    designSize: {
      handler: function () {
        if (!app.isInit) return
        app.adaptApp_update()
        app.adaptModal_update()
      },
      deep: true
    }
  },
  components: { App, modal }
}
</script>

<style lang="scss" scoped>
#anov-app-sys {
  position: absolute;
  height: 100vh;
  width: 100vw;
  display: flex;
}
#con {
  height: 100%;
  flex: 1;
  position: relative;
  background: #181e24;
  background-size: cover;
}
</style>
